<template>
  <div class="decription">
    <Row :gutter="20">
      <Col span="6">
        <div class="details" style="background: #fc7f7d">
          <div class="details-img" style="background: #e36763">
            <img src="../../../../assets/img/photoVoltaic/icon01.png" height="80" width="80"/>
          </div>
          <div style="padding-left:15px">
            <div style="padding-top:10px;font-size:18px">实时功率(kW)</div>
            <div style="font-size: 32px;">{{description.currentPower||0}}</div>
            <Row :gutter="20">
              <Col span="12">
                <div>当日最大功率</div>
                <div style="font-size: 18px">{{description.todayMaxPower||0}}</div>
              </Col>
              <Col span="12">
                <div>昨日最大功率</div>
                <div style="font-size: 18px">{{description.yesterdayMaxPower||0}}</div>
              </Col>
            </Row>
          </div>
        </div>
      </Col>
      <Col span="6">
        <div class="details" style="background: #1fb0ff">
          <div class="details-img" style="background: #179ee7">
            <img src="../../../../assets/img/photoVoltaic/icon02.png" height="80" width="80"/>
          </div>
          <div style="padding-left:15px">
            <div style="padding-top:10px;font-size:18px">当月电量(kWh)</div>
            <div style="font-size: 32px;">1234123</div>
            <Row :gutter="10">
              <Col span="8">
                <div>当月电量</div>
                <div style="font-size: 18px">{{description.mounthQuanlity||0}}</div>
              </Col>
              <Col span="8">
                <div>当季电量</div>
                <div style="font-size: 18px">{{description.seasonQuanlity||0}}</div>
              </Col>
              <Col span="8">
                <div>当年电量</div>
                <div style="font-size: 18px">{{description.yearQuanlity||0}}</div>
              </Col>
            </Row>
          </div>
        </div>
      </Col>
      <Col span="6">
        <div class="details" style="background: #fad05e">
          <div class="details-img" style="background: #eec145">
            <img src="../../../../assets/img/photoVoltaic/icon03.png" height="80" width="80"/>
          </div>
          <div style="padding-left:15px">
            <div style="padding-top:10px;font-size:18px">当前告警(个)</div>
            <div style="font-size: 32px;">{{description.currentAlarm||0}}</div>
            <Row :gutter="20">
              <Col span="8">
                <div>当日告警</div>
                <div style="font-size: 18px">{{description.todayAlarm||0}}</div>
              </Col>
              <Col span="8">
                <div>当月告警</div>
                <div style="font-size: 18px">{{description.mounthAlarm||0}}</div>
              </Col>
              <Col span="8">
                <div>当季告警</div>
                <div style="font-size: 18px">{{description.seasonAlarm ||0 }}</div>
              </Col>
            </Row>
          </div>
        </div>
      </Col>
      <Col span="6">
        <div class="details" style="background: #88d562">
          <div class="details-img" style="background: #7fcc5a">
            <img src="../../../../assets/img/photoVoltaic/icon04.png" height="80" width="80"/>
          </div>
          <div style="flex:1;padding-left:15px;display: flex;align-items: center">
            <Row style="width:100%">
              <Col span=9>
                <div style="padding-top:10px;font-size:18px">通讯状态</div>
                <div style="font-size: 32px;">{{description.txStatus=='02'? '离线':'正常'}}</div>
              </Col>
              <Col span="15">
                <div style="width:100%;padding-top:10px;font-size:18px">CO₂节能减排(千克)</div>
                <div style="font-size: 32px;">{{description.co2 || 0}}</div>
              </Col>
            </Row>
          </div>
        </div>
      </Col>

    </Row>
  </div>
</template>

<script>
import { getFbsData } from "@/api/scada";

export default {
    name: "description",
    props: {},
    data() {
        return {
            description: {}
        };
    },
    computed: {},
    created() {
    },
    mounted() {
        getFbsData().then(res => {
            if (res.code === 200) {
                this.description = res.result || {};
            }
        });
    },
    watch: {},
    methods: {},
    components: {}
};
</script>

<style lang="scss" scoped>
  .details {
    height: 150px;
    border-radius: 10px;
    background: red;
    display: flex;
    color: #fff;
    .details-img {
      padding: 0 15px;
      display: flex;
      align-items: center;
      border-radius: 10px 0 0 10px;
      height: 100%;
    }
  }
</style>
